<template>
    <div class="fw-list-com">
        <div
            v-for="(item, index) in list"
            :key="index"
            class="r-item">
            <img
                v-if="item.icon"
                :src="item.icon"
                class="r-item-icon" />
            <div class="r-item-title">{{ item.title }}</div>
            <div
                class="r-text"
                v-html="item.text"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import type { ListItem } from '@/types/card';
    const props = withDefaults(
        defineProps<{
            list: ListItem[];
        }>(),
        {
            list: () => [],
        }
    );
</script>

<style scoped lang="scss">
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .fw-list-com {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .r-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 pxToRem(45);
            box-sizing: border-box;
            text-align: center;
            flex: 1;
            .r-item-icon {
                width: pxToRem(80);
                height: pxToRem(80);
                display: block;
                margin-bottom: pxToRem(19);
            }
            .r-item-title {
                font-family: 'SFProDisplayBold';
                font-size: pxToRem(28);
                color: #000000;
                font-weight: 800;
                margin-bottom: pxToRem(19);
            }
            .r-text {
                font-family: 'SFProDisplayLight';
                font-size: pxToRem(28);
                color: rgba(0, 0, 0, 0.7);
            }
        }
    }

    // 响应式设计 - 中等屏幕 (1024px及以下)
    @include tablet {
        .fw-list-com {
            flex-direction: column;
            .r-item {
                margin-bottom: pxToRem(100);
            }
        }
    }

    // 响应式设计 - 平板端 (768px及以下)
    @include mobile {
        .fw-list-com {
            .r-item {
                padding: 0;
                margin-bottom: pxToRem(20);
                .r-item-icon {
                    width: pxToRem75(80);
                    height: pxToRem75(80);
                    margin-bottom: pxToRem75(19);
                }
                .r-item-title {
                    font-size: pxToRem75(28);
                    margin-bottom: pxToRem75(19);
                }
                .r-text {
                    font-size: pxToRem75(28);
                }
            }
        }
    }
</style>
